<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.btn{
			height:100px;
			width:100px;
			display:block;
			border-radius: 50%;
			border:1px solid;
			text-align:center;
			line-height:100px;/* 垂直居中 */
			/*不兼容IE10以下及火狐3以下;params:水平偏移 垂直偏移 模糊距离 颜色*/
			box-shadow:5px 5px 10px 8px;
			text-decoration: none;/* 去掉下划线 */
			transition:all 3s;//过渡
			animation: aaa 10s;
			overflow: hidden;	
		}
		@keyframes aaa{
			from{
				
			}
			to{
				transform:translate(500px,100px);
				font-size: 2em;
			}
		}
		.btn:hover{/* 鼠标悬停 */
			background: yellow;
			font-size: 1.2em;
			color:green;
			/* position:absolute;
			top:50%;
			left:50%; */
			transform:/* rotate(90deg) */ skew(30deg,0) scale(0.5,1);
			/*  translate(-50%,-50%) */
			
		}
		.btn:active{/* 点击时的样式 */
			background: orange;
			font-size: 1.5em;
			font-family: 黑体;
			color:brown;
			text-decoration: none;
		}
		

	</style>
</head>
<body>
	<a herf="javascript:void(0)" class="btn">点我试试</a>
	<span></span>
	<div></div>
</body>
</html>